<template>
	<view class="container">
		<view class="content">
			<view style="display: flex;justify-content:flex-end;">
				<button style="height: 30rpx;font-size: 8rpx;" type="primary" @click="openshowPopup" :disabled="quality.id != null">单据选择</button>
				<button style="height: 30rpx;font-size: 8rpx;" type="primary" @click="copyBill" :disabled="!quality.id">单据复制</button>
			</view>
		</view>
		<hr class="chr"/>
		<div class = "topbill">
		  <uni-row>
			<uni-col :span="18">
				<table border class="incometop" width="100%" cellpadding=0 cellspacing = 0>
					<tr>
						<th>
							方案名称
						</th>
						<td>
							{{quality.projectName}}
						</td>
						<th>
							备注
						</th>
						<td colspan=3>
							{{quality.remark}}
						</td>
					</tr>
					<tr>
						<th>
							来料单号
						</th>
						<td>
							{{quality.ccode}}
						</td>
						<th>
							供应商
						</th>
						<td>
							{{quality.cvenname}}
						</td>
						<th>
							仓库名称
						</th>
						<td>
							{{quality.cwhname}}
						</td>
					</tr>
					<tr>
						<th>
							产品编码
						</th>
						<td>
							{{quality.cinvcode}}
						</td>
						<th>
							产品名称
						</th>
						<td>
							{{quality.cinvname}}
						</td>
						<th>
							产品规格
						</th>
						<td>
							{{quality.cinvstd}}
						</td>
					</tr>
					<tr>
						<th>
							销售单号
						</th>
						<td>
							{{quality.csocode}}
						</td>
						<th>
							应用机型
						</th>
						<td>
							{{quality.csoinvname}}
						</td>
						<th>
							物料类别
						</th>
						<td>
							<input />
						</td>
					</tr>
					<tr>
						<th>
							质检等级
						</th>
						<td>
							{{quality.level}}
						</td>
						<th>
							数量/抽检数
						</th>
						<td style="display: flex;">
							{{quality.qty}}/<uni-easyinput v-model="quality.checkqty" style="width: 20upx;"></uni-easyinput>
						</td>
						<th>
							版本
						</th>
						<td>
							<picker @change="bindPickerChange" range-key="version" :value="index"  :range="datas">
							<view><text class="itmemain">{{quality.version}}</text></view>
							</picker>
						</td>
					</tr>
				</table>
			</uni-col>
			<uni-col :span="6">
				<div>
					  <table border width="100%" cellspacing = 0 class="incometopright">
						  <tr>
							  <th>
								类型
							  </th>
							  <th>
								  AQL
							  </th>
							  <th>
								 AC
							  </th>
							  <th>
								 RE
							  </th>
						  </tr>
						  <tr>
							  <td>
								  A
							  </td>
							  <td>
								  <select-box :select="grades"  :text="quality.aqla" @selectbox="quality.aqla = $event,changeAqla()"></select-box>
							  </td>
							  <td>
									{{quality.aca}}			  
							  </td>
							  <td>
								   {{quality.rea}}
							  </td>
						  </tr>
						  <tr>
							  <td>
									B
							  </td>
							  <td>
								   <select-box :select="grades" :text="quality.aqlb"  @selectbox="quality.aqlb = $event,changeAqlb()"></select-box>
							  </td>
							  <td>
									
									{{quality.acb}}			  
							  </td>
							  <td>
									{{quality.reb}}
							  </td>
						  </tr>
						  <tr>
							  <td>
									C
							  </td>
							  <td>
								  <select-box :select="grades"  :text="quality.aqlc" @selectbox="quality.aqlc = $event,changeAqlc()"></select-box>
							  </td>
							  <td>
									{{quality.acc}}			  
							  </td>
							  <td>
									{{quality.rec}}
							  </td>
						  </tr>
					  </table>
				 </div>
			</uni-col>
		  </uni-row>
		</div>
		<view style="overflow-x: auto; min-height: 250upx;background-color: #f9f9f9;padding: 5upx;">
			<table border class="maintable" style="border-collapse: separate;overflow: hidden;width:1000upx" cellpadding=0 cellspacing=0>
			    <!-- 表头行 -->
			    <tr>
					<th align="center" width="20"></th>
			        <th align="center" width="150">测试项目</th>
			        <th align="center" width="150">测试指标</th>
			        <th align="center" width="80">规格</th>
			        <th align="center" width="30">AQL</th>
					<th align="center" width="80">NO.1</th>
					<th align="center" width="80">NO.2</th>
					<th align="center" width="80">NO.3</th>
					<th align="center" width="80">NO.4</th>
					<th align="center" width="80">A</th>
					<th align="center" width="80">B</th>
					<th align="center" width="80">C</th>
					<th align="center" width="40">系统</th>
					<th align="center" width="80">人工</th>
					<th align="center" width="350">备注</th>
			    </tr>          
			    <!-- 表格数据行 -->
			    <tr v-for="item,index in quality.entitys" v-bind:key="index">
			        <td align="center">{{index}}</td>
			        <td align="center">{{item.planName}}</td>
			        <td align="center">{{item.quotaName}}</td>
			        <td align="center">{{item.specs}}</td>
			        <td align="center">{{item.aql}}</td>
			        <td align="center" :class="item.qc<1?'cdisable':''">
						<input v-if="item.type === '数值'" type="number" v-model="item.no1" :disabled="item.qc<1" @blur="check"/>
						<checkbox v-else checked="item.no1=='符合'" @click="selbox(index,'no1')" :disabled="item.qc<1">
							{{item.no1}}
						</checkbox>
					</td>
					<td align="center">
						<view  :class="item.qc<2?'cdisable':''">
							<input v-if="item.type === '数值'" type="number" v-model="item.no2" :disabled="item.qc<2" @blur="check"/>
							<checkbox v-else checked="item.no2=='符合'" @click="selbox(index,'no2')" :disabled="item.qc<2">
							{{item.no2}}
							</checkbox>
						</view>
					</td>
					<td align="center" >
						<view :class="item.qc<3?'cdisable':''">
							<input v-if="item.type === '数值'" type="number" v-model="item.no3" :disabled="item.qc<3" @blur="check"/>
							<checkbox v-else checked="item.no3=='符合'" @click="selbox(index,'no3')" :disabled="item.qc<3">
							{{item.no3}}
							</checkbox>
						</view>
					</td>
					<td align="center" >
						<view :class="item.qc<4?'cdisable':''">
							<input v-if="item.type === '数值'" type="number" v-model="item.no4" :disabled="item.qc<4" @blur="check"/>
							<checkbox v-else checked="item.no4=='符合'" @click="selbox(index,'no4')" :disabled="item.qc<4">
							{{item.no4}}
							</checkbox>
						</view>
					</td>
					<td>
						<input type="number" :disabled="item.aql != 'A'" v-model="item.pda"  @blur="panduan" :class="[item.aql != 'A'?'uneditable':'']"/>
					</td>
					<td>
						<input type="number" :disabled="item.aql != 'B'" v-model="item.pdb"  @blur="panduan" :class="[item.aql != 'B'?'uneditable':'']"/>
					</td>
					<td>
						<input type="number" :disabled="item.aql != 'C'" v-model="item.pdc"  @blur="panduan" :class="[item.aql != 'C'?'uneditable':'']"/>
					</td>
			        <td align="center">{{item.judge}}</td>
			        <td align="center">
						<checkbox checked="item.result=='合格'" @click="selresult(index)" >
						{{item.result}}
						</checkbox>
					</td>
					<td align="center">
						<uni-easyinput v-model="item.remark"></uni-easyinput>
					</td>
			    </tr>
			</table>
		</view>
		
		<uni-card title="总评">
			<view style="width: 280upx;margin-bottom: 10upx;">
				<uni-file-picker 
					auto-upload
				    v-model="imageValue" 
				    fileMediatype="image" 
				    mode="grid" 
					:limit="6"
				    @select="select" 
				    @progress="progress" 
				    @success="success" 
				    @fail="fail" 
					:auto-upload="true"
				/>
			</view>
			<view>
				<uni-easyinput v-model="quality.describe"  placeholder="备注" ></uni-easyinput>
			</view>
			<view style="display: flex;flex-direction: row;justify-content: space-between;margin:20rpx 10rpx;">
				<view>
					<radio-group @change="radioChange">
						<radio value="合格" :checked="quality.measurement === '合格'">合格</radio>
						<radio value="不合格" :checked="quality.measurement === '不合格'">不合格</radio>
					</radio-group>
				</view>
				<view>
					<button type="primary" size="mini" @click="saveEdit">保存</button>
				</view>
			</view>
		</uni-card>
		
		<uni-popup ref="showPopup" type="center" :animation="false" :mask-click="false">
			<view style="background-color: #FFFFFF;width: 600upx;height: 250upx;padding: 40upx;margin-top: 60upx;">
				<view class="rowborder">
					<view>
						<button size="mini" type="default" @click="closeshowPopup()">取消</button>
					</view>
<!-- 					<view>
						<picker mode="date" :value="query.ddate" @change="bindDateChange"  class="topborder">
							<text class="inputborder">日期:{{query.ddate}}</text>
						</picker>
					</view> -->
					<view class="billflex">
						<uni-easyinput placeholder="产品编码" v-model="query.cinvcode" class="inputbill" ></uni-easyinput>
						<uni-easyinput placeholder="单号" v-model="query.ccode" class="inputbill" ></uni-easyinput>
						<button size="mini" type="default" @click="findAll">查询</button>
					</view>
					<hr/>
				</view>
				<scroll-view  scroll-y="true" style="height: 220upx;">
					<view v-for="item,index in bills" v-bind:key="index"  @click="selBill(index)">
						<view style="color: #ff0000;float: right;margin: 20upx;">{{item.cBDefine13?item.cBDefine13:'待质检' }}</view>
						<view><text class="itemth">单号:</text><text class="itmemain">{{item.cCode}}</text></view>
						<view><text class="itemth">供应商名称:</text><text class="itmemain">{{item.cVenName}}</text></view>
						<view style="display: flex;">
							<view style="width: 300px;"><text class="itemth">编码:</text><text class="itmemain">{{item.cInvCode}}</text></view>
							<view><text class="itemth">产品:</text><text class="itmemain">{{item.cInvName}}</text></view>
						</view>
						<view style="display: flex;">
							<view style="width: 300px;"><text class="itemth">规格:</text><text class="itmemain">{{item.cInvStd}}</text></view>
							<view><text class="itemth">数量:</text><text class="itmemain">{{item.iQuantity}}</text></view>
						</view>
						<view style="display: flex;">
							<view style="width: 300px;"><text class="itemth">仓库:</text><text class="itmemain">{{item.cWhName}}</text></view>
							<view><text class="itemth">需求跟踪号:</text><text class="itmemain">{{item.cSOCode}}</text></view>
						</view>
						<view style="display: flex;">
							<view style="width: 300px;"><text class="itemth">产品型号:</text><text class="itmemain">{{item.csoinvname}}</text></view>
							<view><text class="itemth">日期:</text><text class="itmemain">{{item.dDate}}</text></view>
						</view>
						<hr/>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script>
import selectBox from '../../components/select-box/select-box.vue'
	export default {
		components:{
			selectBox
		},
		onLoad(option) {
			if(option.id){
				this.getBill(option.id)
			}
		},
		created() {
			this.findAll()
			//this.query.ddate = this.getNowqualityatTime();
		},
		data() {
			return {
				imageValue:[],
				open:false,
				index:0,
				datas:[],
				quality:{aqla:''},
				grades: [0, 0.25, 0.4, 0.65, 1.0, 1.5, 2.5, 4.0, 6.5, 10, 15, 25],
				
				form:{},
				showPopup:false,
				bills:[],
				query: {
					pageIndex: 1,
					pageSize: 100,
					cinvcode: '',
					csocode:'',
					ddate: ''
				},
			}
		},
		methods: {
			getProject(){
				this.$http.get(
					"project/getByCInvCode",
					{
						cinvcode:this.quality.cInvCode
					}
				).then(res=>{
					this.datas = res.data.data.data
					if(this.datas.length > 0){
						this.setQuality(this.datas[this.index])
					}else{
						uni.showToast({
							icon:'error',
						    title: '该产品未有方案',
						    duration: 1000
						});
					}
					
				})
			},
			getNowqualityatTime() {
				let date = new Date();
				let seperator1 = "-";
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				let currentdate = year + seperator1 + month + seperator1 + strDate;
				return currentdate;
			},
			getBill(id){
				this.$http.get(
					"quality/get",
					{
						id:id
					}
				).then(res=>{
					console.log(res.data.data)
					this.quality = res.data.data.data
				})
			},
			bindPickerChange(e){
				this.setQuality(this.datas[e.detail.value])
			},
			selVersion(e) {
			  for (const item of this.datas) {
				if (item.id === e.target.value) {
				  this.setQuality(item)
				  break
				}
			  }
			},
			selBill(index){
				this.form = this.bills[index]
				if(this.form.cBDefine13){
					uni.showToast({
					    title: '已检验',
					    duration: 2000
					});
					return;
				}
				this.getProject(this.form.cInvCode)
				this.closeshowPopup()
			},
			getProject(cinvcode) {
				this.$http.get(
					"/project/getByCInvCode",
					{
						cinvcode:cinvcode
					}
				).then(res=>{
					if (res.data.data.data && res.data.data.data.length > 0) {
					  this.projects = res.data.data.data
					  const data = res.data.data.data[res.data.data.data.length - 1]
					  this.setQuality(data)
					} else {
						uni.showToast({
						    title: '该产品还没有方案',
						    duration: 2000
						});
						}
					})
			    },
			copyBill(){
				if(this.quality.cinvcode){
					this.query.cinvcode = this.quality.cinvcode
					this.findAll()
				}
				this.quality.id = null
				this.quality.cvencode = null
				this.quality.cvenname = null
				this.quality.cdepname = null
				this.quality.cdepcode = null
				this.quality.autoid = null
				this.quality.qty = null
				this.quality.ccode = null
				this.quality.csoinvname = null
				this.quality.cinvname = null
				this.quality.cinvstd = null
				this.quality.aql = null
				this.quality.projectId = null
				this.quality.projectDescribe = null
				this.quality.projectName = null
				this.quality.zjStatus = null 
			  this.openshowPopup();
			},
			setChoujian(){
			  if (this.quality.level && this.quality.qty) {
				  this.$http.get(
				  	"/qmilcode/findDemoByLevelAndQty",
				  	{ level: this.quality.level, qty: this.quality.qty }
				  ).then(res=>{
					  console.log(res.data)
					if (res.data.code == 200) {
						this.quality.checkqty = res.data.data.data.ISAMPLEQTY
						this.changeDemo()
					  }
				  })
				}
			},
			changeDemo() {
			  this.changeAqla()
			  this.changeAqlb()
			  this.changeAqlc()
			},
			setQuality(data) {
			    this.quality.cvencode = this.form.cVenCode
				this.quality.cvenname = this.form.cVenName
				this.quality.cdepname = this.quality.cDepName
				this.quality.cdepcode = this.form.cDepCode
				this.quality.autoid = this.form.AutoID
				this.quality.qty = this.form.iQuantity
				this.quality.ccode = this.form.cCode
				this.quality.ddate = this.form.dDate
				this.quality.cwhname = this.form.cWhname
				this.quality.csocode = this.form.cSOCode
				this.quality.csoinvname = this.form.csoinvname
				this.quality.cinvname = data.cinvname
				this.quality.cinvstd = data.cinvstd
				this.quality.cfree1 = data.cFree1
				this.quality.aql = data.aql
				this.quality.projectId = data.id
				this.quality.projectDescribe = data.describe
				this.quality.projectName = data.name
				this.quality.remark = data.remark
				this.quality.level = data.level

				if(this.quality.version == data.version && this.quality.cinvcode == data.cinvcode ){
				 for (const item of this.quality.entitys) {
				   item.id = null
				   item.refId  = null
				 }
				}else{
				 this.quality.cinvcode = data.cinvcode
				 this.quality.version = data.version
				 let entitys = []
				 for (const item of data.entitys) {
				   const ent = { quotaId: item.quota.id, quotaName: item.quota.name, type: item.type,
					 planId: item.quota.basePlan.id, planName: item.quota.basePlan.name, specs: item.specs,aql:item.aql,
					 judge: '合格', result: '合格',grade:item.grade,qc:5,
					 pda:0,pdb:0,pdc:0,
					 strVal: item.strVal, miniVal: item.miniVal, stanVal: item.stanVal, maxVal: item.maxVal }
				   entitys.push(ent)
				 }
				 this.quality.entitys = entitys
				}

				this.active = 2
				this.setChoujian()
			},
			setGrade() {
				for (let i = 0; i < this.quality.entitys.length; i++) {
					const item = this.quality.entitys[i]	
					this.$http.get(
						"qmilcode/get",
						{ level: this.quality.level, qty: 100, grade: item.grade }
					).then(res=>{
						console.log(res.data.data.data)
						item.qc = res.data.data.data.qc
						item.ac = res.data.data.data.ac
						item.re = res.data.data.data.re
						if(item.type === '字符'){
							if(item.qc > 0 ){
								item.no1 = '符合'
							}
							if(item.qc > 1 ){
								item.no2 = '符合'
							}
							if(item.qc > 2 ){
								item.no3 = '符合'
							}
							if(item.qc > 3 ){
								item.no4 = '符合'
							}
							if(item.qc > 4 ){
								item.no5 = '符合'
							}
						}
						this.quality.entitys[i] = item
						this.quality.entitys = JSON.parse(JSON.stringify(this.quality.entitys))
					})
				}
			},
			check() {
			  for (const row of this.quality.entitys) {
				if (row.type === '数值') {
				  row.judge = '合格'
				  if (row.qc >= 1 && row.no1 && (row.miniVal > row.no1 || row.no1 > row.maxVal)) {
					row.result = row.judge = '不合格'
					continue
				  }
				  if (row.qc >= 2 && row.no2 && (row.miniVal > row.no2 || row.no2 > row.maxVal)) {
					row.result = row.judge = '不合格'
					continue
				  }
				  if (row.qc >= 3 && row.no3 && (row.miniVal > row.no3 || row.no3 > row.maxVal)) {
					row.result = row.judge = '不合格'
					continue
				  }
				  if (row.qc >= 4 && row.no4 && (row.miniVal > row.no4 || row.no4 > row.maxVal)) {
					row.result = row.judge = '不合格'
					continue
				  }
				  if (row.qc >= 5 && row.no5 && (row.miniVa > row.no5 || row.no5 > row.maxVal)) {
					row.result = row.judge = '不合格'
					continue
				  }
				}
				row.result = '合格'
			  }
			  this.quality = JSON.parse(JSON.stringify(this.quality))
			},
			panduan(){
			  for (const row of this.quality.entitys) {
				if (row.type === '字符') {
				  row.judge = '合格'
				  if(row.pda){
					row.pdb  = undefined
					row.pdc  = undefined
					if(this.quality.rea){
					  if(row.pda > this.quality.aca){
						row.result = row.judge = '不合格'
						continue;
					  }
					}else {
					  this.$message({
						showClose: true,
						message: '请选择AQL值A',
						type: 'warning'
					  })
					  return;
					}
				  }
				  if(row.pdb){
					row.pda  = undefined
					row.pdc  = undefined
					if(this.quality.reb){
					  if(row.pdb > this.quality.acb){
						row.result = row.judge = '不合格'
						continue;
					  }
					}else {
					  this.$message({
						showClose: true,
						message: '请选择AQL值B',
						type: 'warning'
					  })
					  return;
					}
				  }
				  if(row.pdc){
					row.pdb  = undefined
					row.pda  = undefined
					if(this.quality.rec){
					  if(row.pdc > this.quality.acc){
						row.result = row.judge = '不合格'
						continue;
					  }
					}else {
					  this.$message({
						showClose: true,
						message: '请选择AQL值C',
						type: 'warning'
					  })
					  return;
					}
				  }
				  row.result = '合格'
				}
			  }
			  this.quality = JSON.parse(JSON.stringify(this.quality))
			},
			radioChange(e){
				this.quality.measurement = e.detail.value
			},
			showDrawer(){
				this.$refs.drawer.open()
			},
			selbox(index,type){
				this.quality.entitys[index][type] =  this.quality.entitys[index][type] === '符合' ? '不符合' : '符合' 
				//this.quality.entitys = JSON.parse(JSON.stringify(this.quality.entitys))
				//this.check()
			},
			selresult(index){
				this.quality.entitys[index].result =  this.quality.entitys[index].result === '合格' ? '不合格' : '合格'
				this.quality.entitys = JSON.parse(JSON.stringify(this.quality.entitys))
				//this.check()
			},
			saveEdit() {
			  if(!this.quality.version){
				 uni.showToast({
				 	icon:'error',
				     title: '请选择质检方案',
				     duration: 1000
				 });
				 return;
			  }
			  
			  this.quality.zjStatus = '待审核'
			  this.$http.post(
			  	"quality/save",
			  	this.quality
			  ).then(res=>{
				if(res.data.code === 200){
					uni.showToast({
					    title: res.data.message,
					    duration: 2000
					});
					setTimeout(()=>{
						uni.navigateBack()
					},2000)
				}else{
					uni.showToast({
						icon:'error',
					    title: res.data.message,
					    duration: 2000
					});
				}
			  })
			},
			findAll(){
				this.$http.post(
					"inCome/query",
					this.query
				).then(res=>{
					this.bills = res.data.data.page.content
				})
			},
			bindDateChange(e){
				this.query.ddate = e.detail.value
				this.findAll()
			},
			openshowPopup(){
				this.$refs.showPopup.open();
			},
			closeshowPopup(){
				this.$refs.showPopup.close();
			},
			  // 获取上传状态
			select(e){
				this.$http.upload(e.tempFilePaths[0]).then(res =>{
					console.log(res.data)
				})
			},
			// 获取上传进度
			progress(e){
				console.log('上传进度：',e)
			},

			// 上传成功
			success(e){
				console.log('上传成功')
			},
			// 上传失败
			fail(e){
				console.log('上传失败：',e)
			},
			changeAqla(){
			  if(!this.quality.qty){
				uni.showToast({
					icon:'error',
					title: '请先选择单据',
					duration: 1000
				});
				return
			  }
			  if(this.quality.aqla === 0){
				this.quality.aca = 0
				this.quality.rea = 0
			  }else if(this.quality.aqla){
				const data = { level: this.quality.level, qty: this.quality.qty, grade: this.quality.aqla }
				this.$http.get(
					"qmilcode/get",
					data
				).then(res=>{
					this.quality.aca = res.data.data.data.ac
					this.quality.rea = res.data.data.data.re
				  for(const item of this.quality.entitys){
					 if(item.aql === 'A'){
					   item.aca = res.data.data.data.ac
					   item.rea = res.data.data.data.re
					 }
				   }
				   this.panduan()
				})
			  }
			  this.quality = JSON.parse(JSON.stringify(this.quality))
			},
			changeAqlb(){
			  if(!this.quality.qty){
				uni.showToast({
					icon:'error',
					title: '请先选择单据',
					duration: 1000
				});
				return
			  }
			  if(this.quality.aqlb === 0){
				this.quality.acb = 0
				this.quality.reb = 0
			  }else if(this.quality.aqlb){
				const data = { level: this.quality.level, qty: this.quality.qty, grade: this.quality.aqlb }
			   this.$http.get(
				"qmilcode/get",
				data
			   ).then(res=>{
				  this.quality.acb = res.data.data.data.ac
				  this.quality.reb = res.data.data.data.re
					for(const item of this.quality.entitys){
					if(item.aql === 'B'){
						item.acb = res.data.data.data.ac
						item.reb = res.data.data.data.re
					  }
					}
					this.panduan()
				})
			  }
			  this.quality = JSON.parse(JSON.stringify(this.quality))
			},
			changeAqlc(){
			  if(!this.quality.qty){
				uni.showToast({
					icon:'error',
					title: '请先选择单据',
					duration: 1000
				});
				return
			  }
			  if(this.quality.aqlc === 0){
				this.quality.acc = 0
				this.quality.rec = 0
			  }else if(this.quality.aqlc){
				const data = { level: this.quality.level, qty: this.quality.qty, grade: this.quality.aqlc }
				this.$http.get(
					"qmilcode/get",
					data
				).then(res=>{
					this.quality.acc = res.data.data.data.ac
					  this.quality.rec = res.data.data.data.re
					  for(const item of this.quality.entitys){
						if(item.aql === 'C'){
						  item.acc = res.data.data.data.ac
						  item.rec = res.data.data.data.re
						}
					  }
					  this.panduan()
				})
			  }
			  this.quality = JSON.parse(JSON.stringify(this.quality))
			}
		}
	}
</script>

<style lang="scss">
	.container {
		font-size: 12px;
		height: 100vh;
		background-color: #f0faff;
	}
	.unigriditem{
		text-align:center;
		text-justify: auto;
		margin: auto auto;
	}
	.itemth{
		padding: 10rpx;
		font-size: 10rpx;
	}
	.itmemain{
		font-size: 15rpx;
		color: #007AFF;
	}
	.noselect{
		width: 100%;
		height: 30rpx;
		border-radius: 5rpx;
		border-width: 1rpx;
		border-color: #dedede;
	}
	.topbill{
		padding: 5upx 0upx;
	}
	.chr{
		height:1upx;
		border:none;
		border-top:1upx solid #cbebff;
	}
	.cdisable{
		background-color: #d5d5d5;
		visibility:hidden;
		
	}
	.incometop{
		border-color: #f9f9f9;
		border-radius: 5upx;
		th{
			border-color: #f1f1f1;
			width: 50rpx;
			text-align: center;
			background-color: #d6d6d6;
		}
		td{
			padding-left: 4upx;
			font-size: 10px;
			color: #3a3a3a;
			border-color: #f9f9f9;
			width: 100rpx;
			background-color: #fafafa;
		}
	}
	.incometopright{
		text-align: center;
		border-color: #f9f9f9;
		border-radius: 5upx;
		th{
			width: 25%;
			border-color: #f1f1f1;
			width: 50rpx;
			text-align: center;
			background-color: #d6d6d6;
		}
		td{
			font-size: 10px;
			color: #3a3a3a;
			border-color: #f9f9f9;
			width: 100rpx;
			background-color: #fafafa;
		}
	}
	.maintable{
		text-align: center;
		border-color: #f9f9f9;
		border-radius: 5upx;
		th{
			border-color: #f1f1f1;
			text-align: center;
			background-color: #d6d6d6;
		}
		td{
			font-size: 10px;
			color: #3a3a3a;
			border-color: #f9f9f9;
			background-color: #fafafa;
		}
	}
	.uneditable{
		background-color: #d6d6d6;
	}
	
	.rowborder {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 3rpx;
	}
	.billflex {
		display: flex;
		flex-direction: row;
		margin-right: 10rpx;
		width: 400rpx;
	}
	.topborder{
		margin: 2rpx 20rpx;
	}
	.inputborder{
		font-size: 20px;
		background-color: #ffffff;
		border-color: #d2f1ff;
		background-color: #d2f1ff;
		padding: 3rpx 10rpx;
		border-width: 0.5rpx;
		border-style:solid;
		border-radius: 8rpx;
	}
</style>
